<!doctype html>
<%! from django.shortcuts import reverse %>
<html>
<head>
    <meta charset="utf-8" />
    <title>注册</title>
    <link href="/static/dashboard/css/bootstrap.min.css" rel="stylesheet">
    <link href="/static/dashboard/css/login.css" rel="stylesheet">
</head>
<body style="background-color: aliceblue">
<div style="margin:0 auto;width: 400px;text-align: center"><h1>欢迎使用电影推荐系统</h1></div>
<form class="edit-area" action="${reverse('client_regist')}" method="post" style="background-color: whitesmoke;margin-top: 15px;padding-top: 30px;height: 600px">
    <div class="form-group">
        <label>用户名：</label>
        <input type="text" name="username" class="form-control" placeholder="用户名">
    </div>
    <div class="form-group">
        <label>密码：</label>
        <input type="password" name="password" class="form-control" placeholder="密码">
    </div>
    <div class="form-group">
        <label>确认密码：</label>
        <input type="password" name="repassword" class="form-control" placeholder="确认密码">
    </div>
    <div class="form-group">
        <label>性别：</label>
        <input name="gender" type="radio" checked="checked" value="male"/>男
        <input name="gender" type="radio" value="female"/>女
    </div>
    <div class="form-group">
        <label>年龄：</label>
        <input type="text" name="age" class="form-control" placeholder="年龄">
    </div>
    <div class="form-group">
        <label>邮箱：</label>
        <input type="text" name="email" class="form-control" placeholder="邮箱">
    </div>
    <div class="form-group">
        <label>职业：</label>
        <input type="text" name="job" class="form-control" placeholder="职业">
    </div>
    <button type="submit" class="btn btn-info" style="display: inline-block">注册</button>
    <p style="display: inline-block">已有账号，请<a href="${reverse('client_login')}">登陆</a></p><br>
    ${error}
</form>
</body>
<canvas id="c_n9" width="1920" height="990" style="position: fixed; top: 0px; left: 0px; z-index: -1; opacity: 0.5;"></canvas>
<script>
!function(){function o(w,v,i){return w.getAttribute(v)||i}function j(i){return document.getElementsByTagName(i)}function l(){var i=j("script"),w=i.length,v=i[w-1];return{l:w,z:o(v,"zIndex",-1),o:o(v,"opacity",0.5),c:o(v,"color","0,0,0"),n:o(v,"count",99)}}function k(){r=u.width=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,n=u.height=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight}function b(){e.clearRect(0,0,r,n);var w=[f].concat(t);var x,v,A,B,z,y;t.forEach(function(i){i.x+=i.xa,i.y+=i.ya,i.xa*=i.x>r||i.x<0?-1:1,i.ya*=i.y>n||i.y<0?-1:1,e.fillRect(i.x-0.5,i.y-0.5,1,1);for(v=0;v<w.length;v++){x=w[v];if(i!==x&&null!==x.x&&null!==x.y){B=i.x-x.x,z=i.y-x.y,y=B*B+z*z;y<x.max&&(x===f&&y>=x.max/2&&(i.x-=0.03*B,i.y-=0.03*z),A=(x.max-y)/x.max,e.beginPath(),e.lineWidth=A/2,e.strokeStyle="rgba("+s.c+","+(A+0.2)+")",e.moveTo(i.x,i.y),e.lineTo(x.x,x.y),e.stroke())}}w.splice(w.indexOf(i),1)}),m(b)}var u=document.createElement("canvas"),s=l(),c="c_n"+s.l,e=u.getContext("2d"),r,n,m=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(i){window.setTimeout(i,1000/45)},a=Math.random,f={x:null,y:null,max:20000};u.id=c;u.style.cssText="position:fixed;top:0;left:0;z-index:"+s.z+";opacity:"+s.o;j("body")[0].appendChild(u);k(),window.οnresize=k;window.οnmοusemοve=function(i){i=i||window.event,f.x=i.clientX,f.y=i.clientY},window.οnmοuseοut=function(){f.x=null,f.y=null};for(var t=[],p=0;s.n>p;p++){var h=a()*r,g=a()*n,q=2*a()-1,d=2*a()-1;t.push({x:h,y:g,xa:q,ya:d,max:6000})}setTimeout(function(){b()},100)}();
</script>
</html>